<template>
	<SearchTable :table='tableConfig' :control='controlsConfig'/>
</template>

<script setup>
	const SearchTable 	= $.lazy(()=>import('#cpt/temp/SearchTable.vue'))
	/* ---------------------------  按钮权限 --------------------------- */
	let controlsConfig = $ref({
		title: '可操作按钮',
		refresh: true,
		perm: [ 'add','delete','update' ],		// 当前页面权限
		controls	: [
			{ label:'下拉操作', mode:'dropdown',
				data: [
					{ mode:'click', label:'添加', perm:'add', click:()=> { } }, 
					{ mode:'del', label:'删除',  perm:'delete' },
					{ mode:'click', label:'修改', click:()=> { } },			// 当 perm 不存在，或 false 时，始终显示按钮
				]
			},
			{ mode:'click',	label:'添加', 			perm:'add', 		click:()=> { } },
			{ mode:'del',	label:'删除', 			perm:'delete' },
			{ mode:'click',	label:'修改', 			perm:'update',	click:()=> { } },
			{ mode:'click', label:'其它', 	click:()=> {
				
			} },					
		]
	})
	
	/* ---------------------------  表格按钮权限 --------------------------- */
	let tableConfig = $ref({
		cols		: [
			{ title: '名称', 	dataIndex: 'name' },
			{ title: '内容', 	dataIndex: 'content' },
			{ ...$fn.table.control, width: 300 },
			{ ...$fn.table.controlsSelect }
		],
		data		: [
			{ name:'Vue', content:'vue', id:1 },
			{ name:'React', content:'react', id: 2 },
		],
		row: {},
		controls 	: (rows,index) => [
			{ mode:'delModal',  perm:'delete', index },
			{ mode:'click', label:'启用', perm:'add', click:()=> { } },
			{ mode:'click', label:'修改', perm:'update', click:()=> { } },
		]
	})
</script>